<template>
  <div class="product-detail">
    <div class="container">
      <div class="product-content">
        <div class="product-image">
          <img :src="product.image" :alt="product.name" />
        </div>
        <div class="product-info">
          <h1>{{ product.name }}</h1>
          <p class="price">¥{{ product.price }}</p>
          <p class="original-price" v-if="product.originalPrice">原价: ¥{{ product.originalPrice }}</p>
          <div class="actions">
            <el-button type="primary" size="large" @click="addToCart">加入购物车</el-button>
            <el-button type="success" size="large">立即购买</el-button>
          </div>
          <div class="product-description">
            <h3>商品描述</h3>
            <p>{{ product.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

interface Product {
  id: number
  name: string
  price: number
  originalPrice?: number
  image: string
  description: string
}

const route = useRoute()
const productId = route.params.id

const product = ref<Product>({
  id: 1,
  name: 'iPhone 15 Pro',
  price: 7999,
  originalPrice: 8999,
  image: '/images/iphone15.jpg',
  description: 'iPhone 15 Pro 采用钛金属设计，配备A17 Pro芯片，带来突破性的性能和专业级相机系统。'
})

const addToCart = () => {
  ElMessage.success('已加入购物车')
}

onMounted(() => {
  // 根据productId加载商品详情
  console.log('加载商品详情:', productId)
})
</script>

<style scoped>
.product-detail {
  padding: 2rem 0;
}

.product-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.product-image img {
  width: 100%;
  max-width: 500px;
  border-radius: 8px;
}

.price {
  font-size: 2rem;
  color: #f56c6c;
  font-weight: bold;
}

.original-price {
  text-decoration: line-through;
  color: #999;
}

.actions {
  margin: 2rem 0;
  display: flex;
  gap: 1rem;
}

.product-description {
  margin-top: 2rem;
}
</style>